<template>
  <div class="list">
    <PageHeader title="商品添加" hidden-breadcrumb>
      <template #action>
        <Button type="primary" @click="$router.go(-1)">返回</Button>
      </template>
    </PageHeader>
    <!-- 将内容拆分出来三个组件 -->
    <Tabs class="con" model-value="rich">
      <TabPane label="商品信息" name="info">
        <Base @value="gettBaseValue" />
      </TabPane>
      <TabPane label="商品属性" name="attr">标签二的内容</TabPane>
      <TabPane label="商品详情" name="rich">
        <TEditor ref="editor" v-model:value="formData.detail" />
      </TabPane>
    </Tabs>
    <!-- 1. 简单信息填写 -->
    <!-- 2. 商品属性填写 -->
    <!-- 3. 商品富文本 -->
    <div>
      <Button type="primary" @click="addData">保存</Button>
    </div>
  </div>
</template>
<script setup>
import Base from "./components/Base";

import { add } from "@/api/goods";

let formData = {
  detail:"<h2>商品详情</h2>"
};

const gettBaseValue = (v) => {
  formData = v;
};
const addData = () => {
  add(this.formData).then((res) => {
    if (res.errCode == 0) {
      this.$Notice.success({
        title: "添加成功",
        onClose: () => {
          this.$router.push("/admin-index/goods");
        },
      });
    } else {
      this.$Notice.error({
        title: "添加失败",
      });
    }
  });
};
</script>

<style scoped>
.list {
  width: 100%;
  margin: 0 10px;
  padding: 10px;
  margin-top: 50px;
}
.con {
  margin-top: 20px;
  background: #fff;
  min-height: 600px;
}
</style>